<template>
	<div class="home">
		<!-- 顶部 -->
		<loading v-if="loading" />
		<template v-if="!loading">
			<div class="home-header">
				<div class="hotContent">
					<el-carousel indicator-position="outside">
						<el-carousel-item class="hotContent-item" v-for="(item, index) in hotList" :key="index">
							<img
								class="hotContent-item-cover"
								@click="$router.push(`article-detail/${item.id}`)"
								:src="item.path"
								alt
							/>
							<div class="hotContent-item-tips">
								<a>{{ item.desc }}</a>
							</div>
						</el-carousel-item>
					</el-carousel>
				</div>
				<div class="hotClass">
					<div class="hotClass-item" @click="changeTagId(item.id)" v-for="(item, index) in typeList" :key="index">
						<img :src="item.img" />
						<span class="hotClass-item-tag">{{ item.name }}</span>
						<span class="hotClass-item-desc">{{ item.desc }}</span>
					</div>
				</div>
			</div>
			<!-- center -->
			<div class="home-body">
				<div class="home-body-article cool fadeInLeft" id="ctx">
					<hot-list :articleList="articleList" />
				</div>
				<div class="home-body-sidebar">
					<Tag-card @changeTagId="changeTagId" />
					<About-card :color="'#fff'" />
				</div>
			</div>
		</template>
	</div>
</template>

<script>
import { queryArticleWithTag } from "@/api/Tag";
import { getHotArticle } from "@/api/Article";
import HotList from "../../components/HotList";
export default {
	components: { HotList },
	data() {
		return {
			hotList: [
				{
					path: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=248857495,2288325489&fm=26&gp=0.jpg",
					desc: "前端知识体系梳理",
					id: 33,
				},
				{
					path: "https://img2.baidu.com/it/u=960273510,4202420586&fm=26&fmt=auto&gp=0.jpg",
					desc: "react详解",
					id: 35,
				},
				{
					path: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.mianfeiwendang.com%2Fpic%2Fccea974485faa5daa2abc78494beddded828ff79%2F1-380-png_6_0_0_132_136_628_372_892.5_1263-640-0-31-640.jpg&refer=http%3A%2F%2Fwww.mianfeiwendang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631702927&t=5faf745563cf6bb126795355fa2f4188",
					desc: "走进html的世界",
					id: 36,
				},
			],
			typeList: [
				{
					img: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3649388259,1540630197&fm=26&gp=0.jpg",
					name: "前端开发",
					desc: "vue的双向绑定源码剖析",
					id: 18,
				},
				{
					img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.kokojia.com%2FPublic%2Fimages%2Fupload%2Farticle%2F2016-01%2F568b86e4a2745.jpg&refer=http%3A%2F%2Fwww.kokojia.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631702950&t=fbe694dd87d5b56fbb489c87324267e8",
					name: "后端开发",
					desc: "使用node开发大前端全栈项目",
					id: 5,
				},
			],
			articleList: [],
			loading: true,
		};
	},
	methods: {
		async getHotArticle() {
			const res = await getHotArticle();
			this.articleList = res.data;
			this.$cool("cool");
			this.loading = false;
		},
		async changeTagId(tagId) {
			if (!tagId) {
				return this.getHotArticle();
			}
			const res = await queryArticleWithTag({ tagId });
			if (!res.data.count) {
				return this.$message.warning("当前标签没有关联文章！");
			}
			document.getElementById(`ctx`).scrollIntoView({
				block: "start",
				behavior: "smooth",
			});
			this.articleList = res.data.rows;
			this.$cool("cool");
		},
	},
	async created() {
		await this.getHotArticle();
	},
};
</script>
<style lang="scss" scoped>
.home {
	margin: 0 auto;
	padding-top: 64px;
	&-header {
		margin-top: 20px;
		height: 450px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		.hotContent {
			width: 66%;
			height: 450px !important;
			&-item {
				width: 100%;
				height: 100%;
				&-cover {
					cursor: pointer;
					width: 100%;
					height: 450px;
					border-radius: 5px;
					filter: brightness(0.95);
				}
				&-tips {
					position: absolute;
					bottom: 40px;
					line-height: 50px;
					color: #fff;
					font-size: 28px;
					background: rgba(0, 0, 0, 0.3);
					width: 100%;
					user-select: none;
					text-align: center;
				}
			}
		}
		.hotClass {
			width: 32%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			&-item {
				height: 216px;
				background: #fff;
				filter: brightness(0.9);
				position: relative;
				&-tag {
					background: rgba(0, 0, 0, 0.7);
					color: #fff;
					position: absolute;
					top: 20px;
					left: 30px;
					padding: 6px 10px;
					font-size: 14px;
					border-radius: 3px;
				}
				&-desc {
					background: rgba(0, 0, 0, 0.8);
					color: #fff;
					position: absolute;
					bottom: 0px;
					left: 0;
					line-height: 50px;
					font-size: 20px;
					width: 100%;
					font-weight: 600;
					padding-left: 20px;
				}
				img {
					width: 100%;
					height: 100%;
				}
				&:hover {
					filter: brightness(1.3);
					cursor: pointer;
					transition: all 0.8s;
				}
			}
		}
	}
	&-body {
		margin-top: 50px;
		display: flex;
		justify-content: space-between;
		&-article {
			width: 66%;
		}
		&-sidebar {
			width: 32%;
		}
	}
}
</style>
